<script setup>
import {computed, ref, unref} from 'vue'
import {useGoodsDetailsApi} from '../../apis/goods.js'
import {onLoad} from '@dcloudio/uni-app'
import { useCartStore } from '../../stores/cart.js'
const {data: goodDetails} = useGoodsDetailsApi()
const cartStore=useCartStore()


//商品信息
const goodItem=ref()

const skuId=ref()

//sku组件
const skuPopupRef = ref()
//购物车组件
const cartPopupRef=ref()

const skuInfo=computed(()=>{
	return unref(goodDetails)?.sku?.find(item=>item._id==unref(skuId))||{}
})

//打开sku
const onOpenSku = () => {skuPopupRef.value.open()}
//打开购物车
const openCartPop=()=>{
	cartPopupRef.value.open()
}

//关闭弹出sku
const onCloseSku=()=>{
	skuPopupRef.value.close()
}

onLoad((e)=>{
	console.log(e)
	goodItem.value=goodDetails
	skuId.value=goodDetails?.sku?.[0]._id||""
})
</script>


<template>
	<view class="page-wrap">
		<!--图片轮播图-->
		<view class="banner-wrap">
			<swiper class="swiper" indicator-dots indicator-active-color="rgba(255,255,255,1)"
				indicator-color="rgba(255,255,255,0.4)">
				<swiper-item v-for="item in 4" :key="item">
					<image class="img" src="/static/tmp_goods.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--标题栏-->
		<view class="title-wrap">
			<view class="price">
				<view class="new">
					<text>￥</text>
					<text class="big">99.99</text>
				</view>
				<view class="old">￥198.00</view>
			</view>
			<view class="name">{{goodDetails.name}}</view>
		</view>
		<!--服务栏-->
		<view class="service-wrap">
			<view class="info">
				<view class="label">服务</view>
				<view class="way">线下门店-快递发货-到店自取</view>
			</view>
		</view>
		<!--规格栏-->
		<view class="style-wrap" @tap="onOpenSku">
			<view class="label">规格</view>
			<view class="name">{{skuInfo?.name}}</view>
			<view class="right">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<!--商品内容-->
		<view class="content-wrap">
			<uv-parse :content="goodDetails.goods_desc"></uv-parse>
		</view>




		<!--底部导航栏-->
		<view class="shop-bar-wrap">
			<view class="flex-box">
				<view class="left-wrap">
					<view class="menu-item">
						<view class="icon-wrap">
							<uni-icons class="icon" type="chat" size="36rpx" color="#666"></uni-icons>
						</view>
						<view class="label">客服</view>
						<button class="btn" open-type="contact">123</button>
					</view>
					<view class="menu-item" @tap="openCartPop">
						<view class="icon-wrap">
							<uni-icons class="icon" type="cart" size="36rpx" color="#666"></uni-icons>
							<view class="tag" v-if="cartStore.goodsNum>0">{{cartStore.goodsNum}}</view>
						</view>
						<view class="label">购物车</view>
					</view>
				</view>
				<view class="right-wrap">
					<view class="btn cart-btn" @tap="onOpenSku">加入购物车</view>
					<view class="btn buy-btn">立即购买</view>
				</view>
			</view>
			<view class="safe-area-box"></view>
		</view>



		<!--sku弹窗-->
		<uni-popup ref="skuPopupRef" type="bottom">
			<view class="sku-pop-wrap">
				<shop-sku :good="goodItem" v-model:sku-id="skuId" @close-sku="onCloseSku"></shop-sku>
			</view>
		</uni-popup>
		
		<!--购物车弹窗-->
		<uni-popup ref="cartPopupRef"  type="bottom" :safe-area="false">
			<view class="cart-pop-wrap">
				<shop-cart></shop-cart>
			</view>
		</uni-popup>
	</view>
</template>


<style lang="scss" scoped>
	.page-wrap {
		.banner-wrap {
			width: 750rpx;
			height: 750rpx;

			.swiper {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}

			}
		}

		.title-wrap,
		{
		padding: 25rpx;
		border-bottom: 10px solid #f0f0f0;

		.price {
			display: flex;
			gap: 30rpx;
			display: flex;
			align-items: flex-end;

			.new {
				color: $uni-color-warning ;
				font-size: 26rpx;
				font-weight: bolder;

				.big {
					font-size: 32rpx;
				}
			}

			.old {
				text-decoration: line-through;
				font-size: 22rpx;
				color: #333;
			}
		}

		.name {
			margin-top: 10rpx;
			font-size: 32rpx;
		}
	}

	.service-wrap,
	.style-wrap {
		width: 100%;
		height: 150rpx;
		padding: 20rpx;
		border-bottom: 10px solid #f0f0f0;
		display: flex;
		align-items: center;

		.info {
			gap: 40rpx;
			display: flex;
			font-size: 28rpx;

			.label {
				color: #aaa;
			}
		}
	}

	.style-wrap {
		font-size: 28rpx;
		justify-content: space-between;

		.label {
			color: #aaa;
			flex-shrink: 0;
		}

		.name {
			margin-left: 40rpx;
			flex: 1;
		}

		.right {
			flex-shrink: 0;
		}
	}

	.content-wrap {
		padding: 20rpx;
	}


	.shop-bar-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding: 0 32rpx;
		background-color: #fff;
		box-shadow: 0 -8rpx 8rpx 0px #e3e3e3;

		.flex-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			.left-wrap {
				display: flex;
				align-items: center;
				height: 100%;
				gap: 30rpx;

				.menu-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 100%;
					position: relative;

					.icon-wrap {
						position: relative;

						.tag {
							position: absolute;
							right: -12rpx;
							top: -12rpx;
							min-width: 26rpx;
							height: 26rpx;
							padding: 6rpx;
							font-size: 18rpx;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: $uni-color-error;
							border-radius: 26rpx;
						}
					}

					.label {
						font-size: 24rpx;
						color: #666;
					}

					.btn {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}

			.right-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 220rpx;
					height: 64rpx;
					font-size: 28rpx;
					color: #fff;
				}

				.cart-btn {
					background-color: orange;
					border-radius: 64rpx 0 0 64rpx;
				}

				.buy-btn {
					background-color: $uni-color-error;
					border-radius: 0 64rpx 64rpx 0;
				}
			}

		}
	}





	.sku-pop-wrap,.cart-pop-wrap {
		background: #fff;
		min-height: 300rpx;
		padding: 32rpx;
		/* #ifdef H5 */
		padding: 32rpx 32rpx 66px;
		/* #endif */
		border-radius: 20rpx 20rpx 0 0;
	}
	}
</style>